/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-01-12 09:35:49
 * @LastEditTime : 2023-08-17 09:56:06
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Common\Configure\Video.jsx
 * @Description  :
 */

import { useState, useRef, useEffect } from 'react'
import { Player, BigPlayButton } from 'video-react'
import { HLSSource } from './HLSSource'

export const Video = ({ data, date, state, playback, name }) => {
    const { deviceSerial, channelNo, tableName, tableName1, token, cameraFactory, playUrl, hd } = data
    const [Url, setUrl] = useState('')
    const BoxHeight = useRef()
    const [CameraFactory, setCameraFactory] = useState()
    useEffect(() => {
        setCameraFactory(cameraFactory)
        if (cameraFactory === 1) {
            let playbackUrl = playback ? playback : ''
            setUrl(
                `https://yingshi.ljkjkf.com/webvideo.html?url=ezopen://open.ys7.com/${deviceSerial}/${channelNo}${
                    hd ? '.hd' : ''
                }.${playback ? 'rec' : 'live'}&token=${token}&date=${date}${playbackUrl}`,
            )
        } else if (cameraFactory === 2) {
            setUrl(
                `https://yingshi.ljkjkf.com/webLive.html?url=imou://open.lechange.com/${deviceSerial}/${channelNo}/1?streamId=1|kitToken=${token}`,
            )
        } else if (cameraFactory === 4) {
            setUrl(playUrl || '')
        } else if (cameraFactory === 5) {
            setUrl(playUrl || '')
        }
    }, [cameraFactory, channelNo, date, deviceSerial, token, playback, playUrl, hd])

    const VideoIframe = ({ url }) => {
        return (
            <iframe
                title="Video"
                src={url}
                width="100%"
                height="100%"
                scrolling="no"
                frameBorder="0"
                allowFullScreen={true}
            />
        )
    }

    return (
        <div className="CommonPagesUnitVideo" ref={BoxHeight}>
            {!state && (
                <div className="videoTitle" style={{ '--size': BoxHeight.current?.clientHeight / 20 + 'px' }}>
                    {name === 1 ? tableName1 : tableName}
                </div>
            )}

            {CameraFactory === 4 ? (
                <DaHuaCameraPlayback data={Url} />
            ) : (
                <VideoIframe
                    url={`${Url}${
                        cameraFactory === 1
                            ? `&width=${BoxHeight.current?.clientWidth}&height=${BoxHeight.current?.clientHeight}`
                            : ''
                    }`}
                />
            )}
        </div>
    )
}

export const ClickVideo = ({ url, date }) => {
    const [Url, setUrl] = useState('')
    const BoxHeight = useRef()
    useEffect(() => setUrl(`${url}&date=${date}`), [date, url])
    const VideoIframe = ({ url }) => {
        return (
            <iframe
                title="Video"
                src={url}
                width="100%"
                height="100%"
                scrolling="no"
                frameBorder="0"
                allowFullScreen={true}
            />
        )
    }

    return (
        <div className="CommonPagesUnitVideo" ref={BoxHeight}>
            <VideoIframe
                url={`${Url}&width=${BoxHeight.current?.clientWidth}&height=${BoxHeight.current?.clientHeight}`}
            />
        </div>
    )
}

export const DaHuaCameraPlayback = ({ data }) => {
    return (
        <div className="CommonPagesUnitVideo">
            <Player fluid={false} width={'100%'} height={'100%'} playsInline>
                <HLSSource isVideoChild src={data} />
                <BigPlayButton position="center" />
            </Player>
        </div>
    )
}
